<template>
  <div class="pannel">
    <NavBar v-if="navbar"></NavBar>
    <ScrollBox @refresh="onRefresh" @load="onLoad" :finshed="finshed" class="scroll-box">
      <slot></slot>
      <Loading :show="!finshed && show"></Loading>
    </ScrollBox>
    <TabBar v-if="tabbar"></TabBar>
  </div>
</template>

<script>
import { Toast } from 'vant';

import NavBar from '@/components/NavBar'
import TabBar from '@/components/TabBar'
import ScrollBox from '@/components/ScrollBox'

export default {
  name: 'Pannel',
  components: { NavBar, TabBar, ScrollBox },
  props: {
    navbar: { type: Boolean, default: false },
    tabbar: { type: Boolean, default: false },
    finshed: { type: Boolean, default: false }
  },
  data() {
    return {
      show: true
    }
  },
  emits: ['refresh', 'load'],
  mounted() {
    // console.log('data3')
  },
  methods: {
    onError(msg = '加载失败') {
      this.show = false;
      Toast.fail(msg);
    },
    onRefresh(func) {
      this.$emit('refresh', func)
    },
    onLoad() {
      this.$emit('load', async (func) => {
        this.show = true;
        await func();
        console.log('打印之前')
        this.show = false;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.pannel {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;

  .scroll-box {
    flex: 1;
  }
}
</style>
